<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>

    <meta charset="UTF-8" />
    <meta content="text/html"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"  />
    <link rel="stylesheet" type="text/css" href="../js/swiper/idangerous.swiper2.7.6.css" />
    <link rel="stylesheet" type="text/css" href="../js/jquery-jbox/2.3/Skins/Red/jbox.css"/>
    <script type="text/javascript" src="../js/jquery-3.2.0.min.js"></script>
    <script type="text/javascript" src="../js/jquerysession.js"></script>
    <script type="text/javascript" src="../js/jquery-migrate-1.1.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery-jbox/2.3/jquery.jBox-2.3.min.js"></script>
    <script type="text/javascript" src="../js/swiper/idangerous.swiper2.7.6.min.js"></script>
    <link rel="stylesheet" href="../css/stationDetail.css" />
    <script type="text/javascript" src="../js/pager_new.js"></script>
</head>
<body id = "reviewBody" style="background: #ffffff;">
<div class="evaluate-detail evaluate-detail-show" id = "reviewDiv">
    <div class="title">

        <div class="title-left">
            <span class="evaluate-star" th:text="${reviewGrade}">4.7</span>
            <div class="star-group">
                <!--<span class="voteStar"><i th:style="'width:'+ ${strGradePercent} + "></i></span>-->
                <span class="voteStar"><i th:attr="style= 'width:'+ ${gradePercent}+'%'"></i></span>
                <!--<span class="voteStar"><i th:width="90%"></i></span>-->
            </div>
            <p class="evaluate-total">此店共有 <span th:text="${reviewCount}">26</span> 人评论</p>
        </div>
        <div class="title-right">
            <div class="evaluate-span"><span>好评</span> <div class="title-bar"><div class="title-child-bar" th:attr="style = 'width:'+ ${negativePercent}+'%' "></div></div> <span th:text="${negativeCount}">24</span>条</div>
            <div class="evaluate-span"><span>中评</span> <div class="title-bar"><div class="title-child-bar" th:attr="style = 'width:'+ ${moderatePercent}+'%' "></div></div> <span th:text="${moderateCount}">24</span>条</div>
            <div class="evaluate-span"><span>差评</span> <div class="title-bar"><div class="title-child-bar" th:attr="style = 'width:'+ ${positivePercent}+'%' "></div></div> <span th:text="${positiveCount}">24</span>条</div>
        </div>
    </div>
    <div class="evaluate-detail-content">
        <ul>
            <li th:each = "review,reviewStat : ${reviewList}">
                <div>
                    <div class="evaluate-left">
                        <!--<img src="/img/touIcon.png" class="tou-icon" alt="" />-->
                        <p class="time nick-name" th:text="${review.username}">his****56</p>
                    </div>
                    <div class="evaluate-center">
                        <p class="time" th:text="${review.reviewday}">2017-09-24</p>
                        <p th:text="${review.reviewmessage}">通过朋友介绍来这个网站预约检测的，服务人员很热情， 好评，因为提前预约过，到店无需等待，再也不怕排队
                            浪费时间啦.</p>
                    </div>
                    <div class="evaluate-right">
                        <span class="detailStar"><i th:attr="style = 'width:'+ ${review.gradepercent}+'%'"></i></span>
                    </div>
                </div>
            </li>
        </ul>

    </div>
    <form id="pageForm" name="pageForm" action="/review/getReviewList" method="post">
        <div hidden="hidden">
            <input name = "stationIdForReview" id="stationIdForReview" th:value="${stationIdForReview}" hidden="hidden"/>
        </div>
    </form>
    <div class="page-main" th:include="pager :: copy">
    </div>
</div>
</body>
</html>
